<template>
  <div class="card">
    <!-- 下场安排 -->
    <div class="card-top">
      <div class="card-top-title">{{activeName}}</div>
<!--      <div class="card-top-title">正在开发</div>-->
<!--      <div v-if="type !== 2" class="card-more" @click="enterMore">更多</div>-->
    </div>
    <div class="card-content">
      <div v-if="type === 1">
        <CommonTable :tableData="xcapList" :columns="xcapColumns" :load="load" :type="type" @refresh="getSyData"></CommonTable>
      </div>
      <div v-if="type === 2">
        <QuickEntry></QuickEntry>
      </div>
      <div v-if="type === 3">
        <CommonTable :tableData="wgdList" :columns="wgdColumns" :load="load" :type="type" @refresh="getSyData"></CommonTable>
      </div>
      <div v-if="type === 4">
        <CommonTable :tableData="wpyjList" :columns="wpyjColumns" :load="load" :type="type" @refresh="getSyData"></CommonTable>
      </div>
    </div>
  </div>
</template>

<script>
import CommonTable from '@/views/components/home/CommonTable.vue'
import QuickEntry from '@/views/components/home/QuickEntry.vue'
import { getHomeList } from '@/api/home'
export default {
  name: 'HomeItem',
  components: {
    CommonTable,
    QuickEntry
  },
  props: {
    type: {
      type: Number
    }
  },
  data() {
    return {
      activeName: this.type === 1 ? '下场安排' : this.type === 2 ? '快速入口' : this.type === 3 ? '正在开发' : this.type === 4 ? '物品邮寄' : '',
      xcapColumns: [
        { id: '1', name: '客户名字', code: 'kh', minWidth: '100px', align: 'left', click: true, handler: 'showApprove', sortable: false },
        { id: '2', name: '地址', code: 'dz', minWidth: '100px', align: 'left', sortable: false },
        { id: '3', name: '下场时间', code: 'xcsj', minWidth: '100px', align: 'left', sortable: false },
        { id: '4', name: '下场负责人', code: 'xcfzrname', minWidth: '70px', align: 'left', sortable: false },
        { id: '5', name: '下场人员', code: 'xcryname', minWidth: '100px', align: 'left', sortable: false },
        { id: '6', name: '下场状态', code: 'sfyxc', minWidth: '90px', align: 'left', sortable: false }
      ],
      wgdColumns: [
        { id: '0', name: '总部编号', code: 'zbbh', minWidth: '100px', align: 'left' },
        { id: '1', name: '客户名称', code: 'khname', minWidth: '100px', align: 'left', click: true, handler: 'showApprove', sortable: false },
        { id: '2', name: '完工编号', code: 'wgbh', minWidth: '100px', align: 'left', sortable: false },
        { id: '3', name: '开发票状态', code: 'sfykfp', minWidth: '70px', align: 'left', sortable: false },
        { id: '4', name: '发票票号', code: 'fpph', minWidth: '100px', align: 'left', sortable: false }
      ],
      wpyjColumns: [
        { id: '0', name: '序号', code: 'xh', width: '50px', align: 'center' },
        { id: '1', name: '客户', code: 'kh', minWidth: '100px', align: 'left', click: true, handler: 'showApprove', sortable: false },
        { id: '2', name: '地址', code: 'dz', minWidth: '100px', align: 'left', sortable: false },
        { id: '3', name: '邮寄商品', code: 'yjsp', minWidth: '70px', align: 'center', sortable: false },
        { id: '4', name: '数量', code: 'number', minWidth: '100px', align: 'left', sortable: false },
        { id: '5', name: '快递公司', code: 'kdgs', minWidth: '100px', align: 'left', sortable: false },
        { id: '6', name: '快递号', code: 'kdh', minWidth: '100px', align: 'left', sortable: false }
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 5
      },
      xcapList: [],
      wgdList: [],
      wpyjList: [],
      load: false,
      index: 0
    }
  },
  created() {
    this.getSyData()
  },
  methods: {
    enterMore() {
      if (this.type === 1) {
        this.$router.push("/gd/xcap");
      }else if (this.type === 3) {
        this.$router.push("/gd/wgd");
      }
    },
    getSyData() {
      this.load = true
      getHomeList(this.queryParams).then(res => {
        this.xcapList = res.xcapList
        this.wgdList = res.wgdList
        this.wpyjList = res.wpyjList
        this.load = false
      })
    }
  },
}
</script>

<style scoped>
.card {
  width: 100%;
  height: 370px;
  margin-bottom: 10px;
  padding: 10px;
  background-color: white;
  border: 1px solid #DCDFE6;
  border-radius: 10px
}
.card-top {
  height: 30px;
  border-bottom: 2px solid #DCDFE6;
  display: flex;
  justify-content: space-between;
}
.card-top-title {
  width: 70px;
  text-align: center;
  border-bottom: 2px solid #276BC1;
  cursor: pointer;
}
.card-top-title:hover {
  color: #3768C0;
}
.card-more{
  color: #303133;
  cursor: pointer;
}
.card-more:hover {
  color: #276BC1;
}
.card-content {
  width: 100%;
  padding-top: 5px;
}
</style>
